<template>
  <div class="item_content">
    <div class="item_head" :style="bgStyle">
      <div class="head_content" :style="cardStyle">
        <div v-if="data.is_open == 1" :style="fontStyle">
          <div class="head_avatar">
            <el-avatar
              :size="50"
              :shape="data.type.avart_type == 1 ? 'circle' : 'square'"
              :src="data.avart_img"
            ></el-avatar>
            <div class="head_inf">
              <div class="number" :style="numStyle">137****1234</div>
              <div class="txt">
                历史消费金额
                <span
                  class="number"
                  :style="numStyle"
                  style="margin:0 5px;font-size:14px"
                  >4.00</span
                >
                元
              </div>
            </div>
          </div>
          <div class="effective">

            <div style="margin-top:5px">
              <el-progress
                :show-text="false"
                :color="data.color.progress_color"
                :percentage="50"
                :stroke-width="4"
              ></el-progress>
            </div>
             <div class="txt">有效时间：2021/10/12-2021/2021/12/12</div>
          </div>
  <!--       <div class="head_food">
            <div class="txt">
              有效时间
              <span
                class="number"
                :style="numStyle"
                style="margin:0 5px;font-size:14px"
                >2021/10/12-2021/2021/12/12</span
              >
              元
            </div>
            <div class="txt">
              历史消费金额
              <span
                class="number"
                :style="numStyle"
                style="margin:0 5px;font-size:14px"
                >400.00</span
              >
              元
            </div>
          </div> -->
          <div class="head_rule" :style="ruleStyle">
            <div class="grade" :style="roundStyle">v1</div>
            <div class="txt">会员规则</div>
          </div>
          <div class="head_btn" :style="ruleStyle">
            <div class="txt">奖励列表</div>
          </div>
        </div>
        <div :style="fontStyle" v-else>
          <div class="head_title">会员等级</div>
          <div class="head_inf ititle">开通会员可享受以下权力</div>
          <div class="head_icon">
            <div class="item">
              <i class="el-icon-s-promotion" />
              <span>全场包邮</span>
            </div>
            <div class="item">
              <i class="el-icon-s-promotion" />
              <span>专属折扣</span>
            </div>
          </div>
          <div class="head_ibtn" :style="ruleStyle">开通会员</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  computed: {
    bgStyle() {
      return "background:" + this.data.color.bg_color;
    },
    cardStyle() {
      if (this.data.is_open == 1) {
        if (this.data.type.card_type == 1) {
          return (
            "background:linear-gradient(71deg," +
            this.data.color.card_bg_color_f +
            " 0%," +
            this.data.color.card_bg_color_l +
            " 100%);"
          );
        } else if (this.data.type.card_type == 2) {
          if (this.data.card_img == "") {
            return "background:url('~@/assets/images/vip_bg.png');";
          } else {
            return "background:url('" + this.data.card_img + "');";
          }
        }
      } else {
        if (this.data.type.card_type_open == 1) {
          return (
            "background:linear-gradient(71deg," +
            this.data.color.card_bg_color_f_open +
            " 0%," +
            this.data.color.card_bg_color_l_open +
            " 100%);"
          );
        } else if (this.data.type.card_type_open == 2) {
          if (this.data.card_img == "") {
            return "background:url('~@/assets/images/vip_bg.png');";
          } else {
            return "background:url('" + this.data.card_img_open + "');";
          }
        }
      }
    },
    fontStyle() {
      return "color:" + this.data.color.card_font_color + ";";
    },
    numStyle() {
      return "color:" + this.data.color.card_num_color;
    },
    ruleStyle() {
      return (
        "background:" +
        this.data.color.card_rule_color +
        ";color:" +
        this.data.color.card_rule_btn_color
      );
    },
    roundStyle() {
      return (
        "background:linear-gradient(71deg," +
        this.data.color.card_round_color_f +
        " 0%," +
        this.data.color.card_round_color_l +
        " 100%); color:" +
        this.data.color.card_grade_color
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.item_content {
  width: 100%;
  .item_head {
    width: 100%;
    position: relative;
    padding: 30px 15px 0;
    overflow: hidden;
    .head_content {
      position: relative;
      border-radius: 10px 10px 0 0;
      z-index: 1;
      width: 100%;
      height: 136px;
      background: linear-gradient(71deg, #a98550 0%, #e2cc9d 100%);
      background-size: cover;
      background-repeat: no-repeat;
      box-shadow: rgba(0, 0, 0, 0.7) 0 2px 10px;
      padding: 15px 20px;
      font-family: PingFang SC;
      font-size: 12px;
      overflow: hidden;
      .head_avatar {
        display: flex;
      }
      .head_inf {
        line-height: 20px;
        letter-spacing: 0.5px;
        margin-left: 5px;
        padding: 5px;

        .number {
          color: #fff;
          font-size: 16px;
        }
        .txt {
          margin-top: 2px;
        }
      }
      .effective {
        margin-top: 20px;
        /deep/.el-progress-bar__outer {
          background-color: #faeac8;
          overflow: hidden;
          border-radius: 0;
          .el-progress-bar__inner {
            border-radius: 0;
          }
        }
        .txt {
          transform: scale(0.8);
          transform-origin: 0 50%;
          margin-top: 20px;
        }
      }
      .head_food {
        margin-top: 6px;
        display: flex;
        justify-content: space-between;
        letter-spacing: 0.1px;
        .txt {
          align-content: center;
        }
        .txt:first-child {
          transform: scale(0.9);
          transform-origin: 0 50%;
          .number {
            color: #fff;
            font-size: 14px;
          }
        }
        .txt:last-child {
          transform: scale(0.9);
          transform-origin: 100% 50%;
          .number {
            color: #fff;
            font-size: 14px;
          }
        }
      }
      .head_rule {
        position: absolute;
        display: block;
        right: 0;
        top: 20px;
        z-index: 2;
        width: 80px;
        height: 28px;
        background: #52555e;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
        opacity: 1;
        border-radius: 15px 0px 0px 15px;
        padding: 5px 0 5px 5px;
        display: flex;
        align-items: center;
        .grade {
          width: 20px;
          height: 20px;
          background: linear-gradient(360deg, #c4a674 0%, #d9c191 100%);
          border-radius: 50%;
          text-align: center;
          font-size: 13px;
          line-height: 20px;
          font-weight: 400;
          color: #fff;
        }
        .txt {
          margin-left: 3px;
        }
      }
      .head_btn {
        position: absolute;
        display: block;
        right: 5px;
        top: 58px;
        z-index: 2;
        padding: 5px 10px;
        background: #52555e;
        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        opacity: 1;
        border-radius: 13px;
      }
      .head_title {
        font-size: 17px;
        letter-spacing: 1px;
        line-height: 22px;
      }
      .ititle {
        margin: 0;
        padding: 0;
        margin-top: 5px;
        line-height: 1;
      }
      .head_icon {
        display: flex;
        align-items: center;
        margin-top: 20px;
        letter-spacing: 1px;
        .item {
          margin-right: 5px;
        }
      }
      .head_ibtn {
        position: absolute;
        margin-top: 5px;
        right: 20px;
        display: block;
        padding: 7px 15px;
        background: #52555e;
        box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.16);
        opacity: 1;
        border-radius: 30px;
      }
    }
  }
}
.item_content::before {
  content: "";
  width: 100%;
  height: 50px;
  z-index: 99;
  position: absolute;
  bottom: -50px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.5) 0 -5px 20px;
}
</style>
